/**
 * vue2 使用自定义指令调用Loading加载效果
 */
import Loading from '@/components/base/Loading'
import Vue from 'vue'
import { addClass, removeClass } from '@/util/dom'

const relativeCls = 'g-relative'

const loadingDirective = {
  // 被绑定元素插入父节点时调用
  inserted (el, binding) {
    // 创建构造器
    const LoadingConstructor = Vue.extend(Loading)
    const loadingInstance = new LoadingConstructor().$mount()
    // 组件实例, 挂到el元素上
    el.loadingInstance = loadingInstance

    // el是 v-loading所在的DOM元素
    console.log(el)
    // console.log(el.loadingInstance)   // VueComponent

    if (binding.value) {
      append(el)
    }

  },
  // 所在组件的 VNode 更新时调用
  // 更新方法时, 可以拿到oldValue
  update (el, binding) {
    // 当值改变
    if (binding.value !== binding.oldValue) {
      // true 添加节点, false删除节点
      binding.value ? append(el) : remove(el)
    }
  }
}

function append (el) {
  // 优化 动态给el添加一个相对定位的样式
  const style = getComputedStyle(el)
  if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
    addClass(el, relativeCls)
  }
  el.appendChild(el.loadingInstance.$el)
}

function remove (el) {
  removeClass(el, relativeCls)
  el.removeChild(el.loadingInstance.$el)
}

export default loadingDirective
